<template>
    <div id="articleRight">
        <div class="article-ranking">
            <h3>博主荐读</h3>
            <ul v-for="(item, index) in ranArticle" :key="index">
                <li>
                    <span @click="goArticle(item.id)">{{item.title}}</span>
                </li>
            </ul>
        </div>
        <div class="article-endorse">
            <h3>网友推荐</h3>
            <ul v-for="(item, index) in endArticle" :key="index">
                <li>
                  <span @click="goArticle(item.id)">{{item.title}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import https from '../../https'

export default {
  name: 'articleRight',
  data () {
    return {
      ranArticle: [],
      endArticle: []
    }
  },
  mounted () {
    https.fetchPost('/article/getByRan', {}).then((data) => {
      this.ranArticle = data.data.data
    }).catch(err => function () {
      console.log(err)
    })
    https.fetchPost('/article/getByEnd', {}).then((data) => {
      this.endArticle = data.data.data
    }).catch(err => function () {
      console.log(err)
    })
  },
  methods: {
    goArticle: function (id) {
      this.$router.push({name: 'articleInfo', query: {id: id}})
    }
  }
}
</script>
<style scoped>
  #articleRight {
    position: fixed;
    margin-left: 800px;
    margin-bottom: 3rem;
    margin-left: 800px;
  }

  .article-ranking, .article-endorse {
    background-color: rgb(255, 255, 255, 0.8);
    padding: 0.5rem;
  }

  .article-endorse {
    margin-top: 5rem;
  }

  .article-ranking ul li, .article-endorse ul li {
    list-style: none;
    text-align: left;
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    border-bottom: 1px solid rgb(255, 255, 255, 0.8);
    cursor: pointer;
    background: url(../../assets/right-ranking.png) no-repeat;
    background-size: auto 100%;
    height: 22px;
  }

  .article-endorse ul li {
    background: url(../../assets/right-endorse.png) no-repeat;
  }

  .article-ranking ul li:hover, .article-endorse ul li:hover {
    border-bottom: 1px solid #000;
  }

  .article-ranking ul li span, .article-endorse ul li span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
</style>
